
<template>
  <div class="app-container">
    <!--查询数据-->
    <div class="SearchTop">
      <el-form :model="queryParams" :inline="true" ref="queryRef">
        <el-form-item label="识别码">
          <el-input v-model="queryParams.identifier" placeholder="请输入识别码" clearable />
        </el-form-item>
        <el-form-item label="配置名称">
          <el-input v-model="queryParams.name" placeholder="请输入配置名称" clearable />
        </el-form-item>
        <el-form-item label="第三方登录类型">
          <el-select v-model="queryParams.status" placeholder="第三方登录类型" clearable>
            <el-option v-for="dict in third_login_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-row class="searchBtn">
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
              <el-button @click="resetQuery">重置</el-button>
              <!-- <a-button class="btnadd" @click="handAdd">新增</a-button> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" plain icon="Plus" @click="handleAdd">
                新增
              </el-button>
              <!-- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                v-hasPermi="['upms:DataSourceConfig:remove']">删除
              </el-button> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 表格数据 -->
    <div class="tableList">
      <el-table v-loading="loading" :data="tableData" style="width: 100%" border class="table-container" stripe
        align="center" @selection-change="handleSelectionChange" @cell-mouse-enter="showTooltip"
        @cell-mouse-leave="hiddenTooltip">
        <el-table-column type="selection" width="55" :align="center" />
        <el-table-column label="序号" width="60" type="index"> </el-table-column>
        <el-table-column label="配置名称" prop="name" />
        <el-table-column label="第三方类型" prop="type" />
        <el-table-column label="识别码" prop="identifier" />
        <el-table-column label="appId" prop="clientId" />
        <el-table-column label="客户端密钥" prop="clientSecret" />
        <el-table-column label="账号生成前缀" prop="accountPrefix" />
        <el-table-column label="账号生成位数" prop="accountLenght" />
        <el-table-column label="对接Url" prop="redirectUri" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <a @click="handleUpdate(scope.row)" title="编辑">
              <img src="../../../assets/images/manage/bianji.png" alt="" />
            </a>
            <a @click="handleDelete(scope.row)" title="删除">
              <img src="../../../assets/images/manage/shanchu.png" alt="" />
            </a>

          </template>
        </el-table-column>
      </el-table>
      <table-tooltip :tableCellMouse="tableCellMouse"></table-tooltip>
      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" :total="total"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <addThird ref="addThirdFrom" @refresh="getList"></addThird>
  </div>
</template>
<script setup name="thirdConfig">
import { thirdLoginList } from "@/api/system/thirdLogin";
import addThird from "./addThird";
import tableTooltip from '@/components/table-tooltip/table-tooltip'
const { proxy } = getCurrentInstance();
const { third_login_type } = proxy.useDict("third_login_type");
const total = ref(0);
const loading = ref(true);
const tableData = ref([]);
const ids = ref([]);
const host = ref("");
console.log(
  "window.location.port",
  window.location.protocol + window.location.host
);
const data = reactive({
  form: {},
  // visible: false,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    type: undefined,
    clientId: undefined,
    identifier: undefined,
    redirectUri: undefined,
    clientSecret: undefined,
    status: undefined,
  },
  rules: {
    name: [{ required: true, message: "配置名称不能为空", trigger: "blur" }],
    identifier: [{ required: true, message: "", trigger: "blur" }],
  },
  tableCellMouse: {
    cellDom: null, // 鼠标移入的cell-dom
    hidden: null, // 是否移除单元格
    row: null, // 行数据
  },
});

const { queryParams, form, rules, visible, tableCellMouse } = toRefs(data);
/** 查询角色列表 */
function getList() {
  loading.value = true;
  let params = {
    name: queryParams.name,
    type: queryParams.type,
    identifier: queryParams.identifier,
    createTime: queryParams.createTime,
    pageNo: queryParams.pageNum,
    pageSize: queryParams.pageSize,
  };

  thirdLoginList(params).then((res) => {
    console.log("第三方列表", res);
    if (res.code == 200) {
      tableData.value = res.rows
      total.value = res.total;
      loading.value = false;
    }

  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 鼠标移入cell
function showTooltip(row, column, cell) {
  tableCellMouse.value.cellDom = cell
  tableCellMouse.value.row = row
  tableCellMouse.value.hidden = false
}

// 鼠标移出cell
function hiddenTooltip() {
  tableCellMouse.value.hidden = true
}

async function handleAdd() {
  // visible.value = true;
  proxy.$refs["addThirdFrom"].add();
}
function handleUpdate(row) {
  proxy.$refs["addThirdFrom"].edit(row);
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.roleId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
getList();
</script>
